<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb style="margin-top: 10px; margin-bottom: 20px; margin-left: 25px;">
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>健康信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>健康信息汇总</el-breadcrumb-item>
    </el-breadcrumb>


    <!--卡片区域-->
    <el-card>
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <!--搜索框-->
        <el-col :span="7" style="margin-bottom: 20px;">
          <el-input v-model="name" placeholder="请输入打卡信息的标题来进行查询" clearable @clear="getClockList()">
            <el-button slot="append" icon="el-icon-search" @click="selectByTitle(name)"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!--用户列表区域-->
      <el-table :data="ClockList.slice((pagenum - 1) * pagesize, pagenum * pagesize)" :border="true" stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="打卡人" prop="clockPerson"></el-table-column>
        <el-table-column label="上传时间" prop="clockTime"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateClock(scope.row)"></el-button>
            <!--删除按钮-->
            <el-button type="danger" icon="el-icon-delete" size="mini"
              @click.native.prevent="deleteClockById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="demo-image__preview">
        <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="urlList" style="z-index:9999" />
      </div>

      <!--修改知识信息对话框-->
      <el-dialog v-model="setClockList" :title=setClockList.title :visible.sync="UKVisible" @close="testa = false">
        <el-form ref="UKform" :model="setClockList" :rules="clock_rules">
          <el-form-item label="标题" prop="title">
            <el-input v-model="setClockList.title" disabled></el-input>
          </el-form-item>
          <el-form-item label="打卡人" prop="clockPerson">
            <el-input v-model="setClockList.clockPerson" disabled></el-input>
          </el-form-item>
          <el-form-item label="打卡地点" prop="clockLocation">
            <el-input v-model="setClockList.clockLocation"></el-input>
          </el-form-item>
          <el-form-item label="当前体温" style="text-align: left" prop="clockContent">
            <el-input v-model="setClockList.clockContent" style="width: 100px"
              oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
          </el-form-item>
          <el-form-item label="健康状态" style="text-align: left" prop="clockStatus">
            <template slot-scope="scope">
              <div v-if="setClockList.clockStatus == 1">
                <el-tag type="success">正常</el-tag>
              </div>
              <div v-else>
                <el-tag type="danger">异常</el-tag>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="打卡文件">
            <!-- <el-input type="textarea" autosize v-model="setClockList.clockContent" style="width: 80%;"></el-input> -->
          </el-form-item>
          <el-upload class="upload-demo" ref="uploadBox" action="action" :before-upload="beforeUpload"
            :http-request="upload" :auto-upload="false">
            <el-button size="small" type="primary" @click="testa = true">点击修改文件</el-button>
          </el-upload>
          <!-- <el-form-item label="是否清空之前文件">
              <el-radio v-model="isClearOtherFiles" label="1">是</el-radio>
              <el-radio v-model="isClearOtherFiles" label="0">否</el-radio>
            </el-form-item> -->
        </el-form>
        <div>
          <template>
            <el-table :data="tableData" style="width: 100%" max-height="250">
              <el-table-column fixed prop="fileName" label="文件名" width="150">
              </el-table-column>
              <el-table-column prop="fileLocation" label="文件位置" width="120">
              </el-table-column>
              <el-table-column prop="fileType" label="文件类型" width="120">
              </el-table-column>
              <el-table-column prop="uploadTime" label="上传时间" width="120">
              </el-table-column>
              <el-table-column prop="uploadPerson" label="上传人" width="300">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="viewRow(scope.row)" type="text" size="small">
                    预览
                  </el-button>
                  <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div slot="footer" style="margin-top: -40px;">
          <el-button @click="UKVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitClock">修改</el-button>
        </div>
      </el-dialog>

      <!--分页区域-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
        :page-sizes="[1, 2, 5, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"
        style="margin-top: 10px; text-align: center">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
const formData = new FormData()
import {
  ClockAPI,
  GetClockAPI,
  GetClockTodayAPI,
  DelClockAPI,
  UpdateClockAPI,
} from '@/components/utils/api/clock_api.js'

import { postImage, GetBinDingAPI,RemoveInfo } from '@/components/utils/api/sysfile_api.js'
export default {
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    const valiNumberPass1 = (rule, value, callback) => {//包含小数的数字
      let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
      if (value === '') {
        callback(new Error('请输入内容'));
      } else if (!reg.test(value)) {
        callback(new Error('请输入数字'));
      } else {
        callback();
      }
    };
    return {
      testa: false,
      annexId: '',
      params: [],
      isClearOtherFiles: '0',
      name: '',
      AKVisible: false,
      UKVisible: false,
      ClockList: [],
      setClockList: {},
      addClockList: {},
      total: 0,
      pagesize: 10,
      pagenum: 1,
      uploadId: '',
      tableData: [],
      clock_rules: {
        clockContent: [{
          required: true, validator: this.valiNumberPass1, message: '请输入体温', trigger: "blur"
        }],
        clockStatus: [{
          required: true, trigger: "blur"
        }],
        clockLocation: [{
          required: true, message: '请输入打卡定位信息', trigger: "blur"
        }],
        clockPerson: [{
          required: true, message: '请输入打卡人', trigger: "blur"
        }],
        annex: [{
          required: true, message: '请上传健康凭证', trigger: "blur"
        }],
        title: [{
          required: true, message: '请输入打卡标题', trigger: "blur"
        }],
      },
      imgViewerVisible: false,
      urlList:[]
    }
  },
  created() {
    this.getClockList()
  },
  methods: {

    //  关闭预览图片
    closeImgViewer() {
      this.imgViewerVisible = false;
      this.urlList = []
    },

    // 预览文件图片
    viewRow(info) {
      this.imgViewerVisible = true
      GetBinDingAPI(info.id).then(res => {
        this.urlList.push(res.data.data)
      })
    },

    // 移除文件列表中的文件
    deleteRow(info) {
            RemoveInfo({ id: info.refId }).then(res => {
                if (res.data.code == 200) {
                    this.$message.success("删除成功")
                }
            })

        },

    // 搜索
    selectByTitle(name) {
      GetClockAPI({
        title: name
      }).then(res => {
        console.log("file: ClockManage.vue:163  res", res)
        if (res.data.code == 200) {
          this.ClockList = res.data.data
        } else {
          this.ClockList = []
        }

      })
    },

    beforeUpload(file) {
      if (file) {
        formData.append('afiles', file)
      }
      else {
        console.log("6")
      }
    },

   async upload() {
     await postImage(formData).then(res => {
        res.data.data.forEach(element => {
          this.setClockList.annexId = element.id
        });
        this.$delete(this.setClockList, 'annex')
        var params = {
          id: this.setClockList.id,
          annexId: this.setClockList.annexId,
          title: this.setClockList.title,
          clockLocation: this.setClockList.clockLocation,
          clockPerson: this.setClockList.clockPerson,
          clockPersonId: this.setClockList.clockPersonId,
          clockContent: this.setClockList.clockContent,
          // clockTime: this.setClockList.clockTime,
          isClearOtherFiles: 0,
          clockStatus: this.setClockList.clockStatus
        }
        UpdateClockAPI(params).then(res1 => {
          if (res1.data.code == 200) {
            this.$message.success("修改成功")
            this.UKVisible = false
          }
          else {
            this.$message.error("修改失败")
          }
          this.getClockList()
        })
      })
    },

    //获取知识疫情信息
    getClockList() {
      GetClockAPI({}).then(res => {
        console.log("file: ClockManage.vue:163  res", res)
        this.ClockList = res.data.data
        this.total = this.ClockList.length
      })
    },

    //添加知识疫情信息
    addClock(form) {
      ClockAPI(form).then(res => {
        console.log(res.data)
      })
    },

    //清空添加信息框
    AKDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },


    //删除知识疫情信息
    deleteClockById(id) {
      var params = {
        id: id
      }
      DelClockAPI(params).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
        }
        this.getClockList()
      })
    },

    //修改打卡信息信息
    updateClock(information) {
      this.UKVisible = true
      this.setClockList = information
      this.tableData = information.annex
      information.annex.forEach(element => {
          this.annexId = element.id
      });
    },

    //提交修改后的打卡信息信息
    submitClock() {
      if (this.testa == true) {
        this.$refs.uploadBox.submit()
      }
      else {
        this.$delete(this.setClockList, 'annex')
        this.$delete(this.setClockList, 'isClock')
        this.$delete(this.setClockList, 'clockTime')
        this.params = this.setClockList
        this.params.annexId = this.annexId
        this.params.isClearOtherFiles = 0
        UpdateClockAPI(this.params).then(res1 => {
          console.log("file: ClockManageTotal.vue:321  res1", res1)
          if (res1.data.code == 200) {
            this.$message.success("修改成功")
            this.UKVisible = false
          }
          else {
            this.$message.error("修改失败")
          }
          this.getClockList()
        })
      }
    },

    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.pagesize = newSize
    },

    //监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.pagenum = newPage
    },
  }
}
</script>